<template>
  <div class="home">
    <h1 style="text-align:center">动态数据</h1>
<!--    <button @click="start">开始执行</button>-->
<!--    <button @click="stop">停止执行</button>-->
    <el-button type="primary" @click="start" plain>开始执行</el-button>
    <el-button type="primary" @click="stop" plain>停止执行</el-button>
    <div style="width:100%; height:400px;" ref="main"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  import { listUser,getDetalis, getUser, delUser, addUser, updateUser,orderUser } from "@/api/system/good";
  export default {
    name: 'Home',
    created() {
      this.getList();
      console.log("this.seriesList",this.seriesList)

    },
    data(){
      return{
        myChart: null,
        dataList: [5,20,36,10,10,20],
        goodList:[],
        seriesList:[],
        timer: null,
        option: null,
      }
    },
    methods:{
      /** 查询数学物品列表 */
      getList() {
        this.loading = true;
        console.log("response.rows2")
        getDetalis(this.queryParams).then(response => {
          this.goodList = response.data;
          for (let i = 0;i<this.goodList.length;i++){
            this.seriesList.push(this.goodList[i].remainder)
          }
          this.showEcharts();
          this.loading = false;
        });
      },
      showEcharts(){
        this.myChart = echarts.init(this.$refs.main);
        this.option = {
          title: {
            text: '物品折线图'
          },
          tooltip: {},
          xAxis: {
            data: ["英语物品","音乐物品","数学物品","机房物品","其他物品"]
          },
          yAxis: {},
          series: [
            {
              name: '销量',
              type: 'line',
              data: this.seriesList,
              smooth: true
            }
          ]
        }
        this.myChart.setOption(this.option);

      },
      start(){
        this.timer = setInterval(()=>{
          // this.myChart.dispose();
          // this.showEcharts();
          this.seriesList[parseInt(5*Math.random())] = parseInt(50*Math.random());
          this.myChart.setOption(this.option);
        },200)
      },
      stop() {
        clearInterval(this.timer);
      }
    },
    mounted(){
      this.showEcharts();
    }
  }
</script>
